<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue过渡动画</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        @keyframes keyframe-in{
            from {
                width: 0px;
                height: 0px;
                background-color: red;
            }
            to {
                width: 100px;
                height: 100px;
                background-color: blue;
            }
        }
        
        @keyframes keyframe-out{
            from {
                width: 100px;
                height: 100px;
                background-color: blue;
            }
            to {
                width: 0px;
                height: 0px;
                background-color: red;
            }
        }


        .demo {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .ani-enter-from {
            width: 0px;
            height: 0px;
            background-color: red;
        }

        .ani-enter-active {
            transition: width 2s, height 2s, background-color 2s;
        }

        .ani-enter-to {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .ani-leave-from {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .ani-leave-active {
            transition: width 2s, height 2s, background-color 3s;
        }

        .ani-leave-to {
            width: 0px;
            height: 0px;
            background-color: red;
        }
    </style>
  </head>
  <body>
    <div id="Application">
        <button @click="click">显示/隐藏</button>
        <transition name="ani" @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            @enter-cancelled="enterCancelled"
            @before-leave="beforeLeave"
            @leave="leave"
            @after-leave="afterLeave"
            @leave-cancelled="leaveCancelled">
            <div v-if="show" class="demo">
            </div>
        </transition>
    </div>
  </body>

  <script>
    const App = Vue.createApp({
        data(){
            return {
                show: false
            }
        },
        methods:{
            click() {
                this.show = !this.show
            },
            beforeEnter(el){
                console.log("beforeEnter")
            },
            enter(el,done){
                console.log("enter")
            },
            afterEnter(el){
                console.log("afterEnter")
            },
            enterCancelled(el){
                console.log("enterCancelled")
            },
            beforeLeave(el){
                console.log("beforeLeave")
            },
            leave(el,done){
                console.log("leave")
            },
            afterLeave(el){
                console.log("afterLeave")
            },
            leaveCancelled(el){
                console.log("leaveCancelled")
            }
        }
    })
    App.mount("#Application")
  </script>

</html>